<template>
    <div class="nav_options_bar">
        <ul>
            <li
                :class="{ active: item.isActive == true }"
                v-for="item in navOptionsRouterList"
                :key="item.id"
                @click="navOptionClick(item)"
            >
                <div class="router_box">
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="item.icon"></use>
                    </svg>
                    <span>{{ item.title }}</span>
                    <svg
                        class="icon close_nav_tab"
                        aria-hidden="true"
                        @click.stop="navOptionDel(item)"
                    >
                        <use xlink:href="#icon-guanbi1"></use>
                    </svg>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import piniaStore from "@/store";
const menuStore = piniaStore();
interface routerType {
    id: number;
    routerUrl: string;
    title: string;
    icon?: string;
    isActive: boolean;
}
const router = useRouter();
let navOptionsRouterList: any = ref([]);
if (sessionStorage.navOptionsRouterList) {
    navOptionsRouterList.value = JSON.parse(sessionStorage.navOptionsRouterList);
    navOptionsRouterList.value.forEach((item: any) => {
        if (item.isActive) {
            menuStore.crumbsStr = item.title;
        }
    });
}
menuStore.$subscribe((mutation: any, state: any) => {
    sessionStorage.navOptionsRouterList = JSON.stringify(state.navOptionsRouterList);
    navOptionsRouterList.value = JSON.parse(sessionStorage.navOptionsRouterList);
});

const navOptionClick = (raw: any) => {
    navOptionsRouterList.value.forEach((item: any) => {
        item.isActive = false;
        if (raw.id == item.id) {
            item.isActive = true;
            menuStore.setCrumbs(item.title);
            router.push({ path: item.routerUrl });
        }
    });
    menuStore.navOptionsRouterList = navOptionsRouterList.value;
};

// 导航删除
const navOptionDel = (raw: any) => {
    navOptionsRouterList.value.forEach((item: any, index: any) => {
        if (raw.id == item.id) {
            navOptionsRouterList.value.splice(index, 1);
            if (raw.isActive == false) {
            } else {
                if (navOptionsRouterList.value.length < 1) {
                    router.push({ path: "/" });
                    menuStore.crumbsStr = "分析页";
                } else if (index == 0) {
                    navOptionsRouterList.value[index].isActive = true;
                    menuStore.crumbsStr = navOptionsRouterList.value[index].title;
                    router.push({ path: navOptionsRouterList.value[index].routerUrl });
                } else {
                    navOptionsRouterList.value[index - 1].isActive = true;
                    menuStore.crumbsStr = navOptionsRouterList.value[index - 1].title;
                    router.push({ path: navOptionsRouterList.value[index - 1].routerUrl });
                }
            }
        }
    });
    menuStore.navOptionsRouterList = navOptionsRouterList.value;
};
</script>
<style lang="scss" scoped>
@import "@/static/css/common.scss";

.nav_options_bar {
    height: auto;
    min-width: 100%;
    border-bottom: 1px solid #eee;

    display: flex;
    align-items: flex-end;

    ul {
        width: 100%;
        height: 80%;
        display: flex;
        align-items: center;
        padding-left: 10px;

        li {
            height: 34px;
            border: 1px solid #eee;
            border-radius: 8px;
            margin: 0 2px;
            margin-bottom: 2px;
            margin-top: 4px;

            .router_box {
                @include display_flex;
                width: 100%;
                height: 100%;
                justify-content: initial;
                margin: 0 10px;
                cursor: pointer;

                svg {
                    width: 16px;
                    height: 16px;
                    fill: #666;
                    @include transition3;
                }

                svg.close_nav_tab {
                    width: 9px;
                    height: 9px;
                    margin-left: 20px;
                    padding: 1px;
                    fill: #666;
                    border: 1px solid transparent;
                    border-radius: 50%;
                    @include transition3;
                }

                svg.close_nav_tab:hover {
                    border: 1px solid #4d70ff;
                    background-color: #4d70ff;
                    fill: #fff;
                }

                span {
                    color: rgba(51, 54, 57, 1);
                    text-indent: 8px;
                    font-size: 13px;
                }
            }
        }

        li:hover,
        li.active {
            border: 1px solid rgb(247, 249, 252);
            // border-bottom: none;
            background-color: #dde3fd;

            svg {
                fill: #4d70ff;
            }

            span {
                color: #4d70ff;
            }
        }
    }
}
</style>
